<template>
  <div>
    <button v-focus="123">2</button>
    <button @click="txt = 22">22</button>
  </div>
</template>
<script>
export default {
  name: "c2",
  data() {
    return {
      txt: "x",
    };
  },
  directives: {
    // 指令的定义
    focus: {
      bind: function() {
        // 每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
      },
      inserted: function(el, binding) {
        // inserted 表示元素插入到DOM中的时候，会执行inserted函数【触发一次】
        el.onclick = () => {
          alert(binding.value);
        };
      },
      updated: function() {
        // 当VNode更新的时候，会执行updated，可能会触发多次
      },
    },
  },
};
</script>
